<template>  
  <view class="container">  
    <!-- 轮播图部分 -->  
    <swiper class="swiper" indicator-dots="true" autoplay="true" circular="true" :interval="2000">  
      <swiper-item v-for="(item, index) in images" :key="index">  
        <image :src="item.src" class="slide-image"></image>  
        <view class="text-overlay">{{ item.text }}</view> <!-- 添加文字覆盖层 -->  
      </swiper-item>  
    </swiper>  

    <!-- 滚动公告部分 -->  
    <view class="announcement-container">  
      <view class="announcement-icon-container">   
        <image src="/static/gonggao.png" class="announcement-icon" />  
      </view>  
      <view class="announcement-content">  
        <text class="announcement-text" v-for="(announcement, index) in announcements" :key="index">{{ announcement }}</text>  
      </view>  
    </view>  

    <!-- 活动列表部分 -->  
    <view class="list">  
      <view class="item" v-for="(item, index) in datalist" :key="index">  
        <view class="activity-image-container">  
          <image :src="item.images[0]" class="activity-image" />  
        </view>  
        <view class="info" @click="skipdetails()">  
          <view class="title">  
            {{ item.title }}  
            <view class="registration-status" :style="{ backgroundColor: getStatusColor(item.status) }">  
              {{ item.status }} <!-- 显示报名状态 -->  
            </view>  
          </view>  
          <view class="location">  
            <image src="/static/lushu.png" class="icon" />  
            路线：{{ item.location }} | {{ item.distance }}  
          </view>  
          <view class="time">  
            <image src="/static/Clock.png" class="icon" />  
            时间：{{ item.time }}  
          </view>  
          <view class="type">  
            <image src="/static/ridetype.png" class="icon" />  
            类型：{{ item.type }}  
          </view>  
          <view class="features">特点：<span v-for="(feature, fIndex) in item.features" :key="fIndex" class="feature-item">{{ feature }}</span></view> <!-- 显示活动特点 -->  
        </view>  
        <image src="/static/rideapp.png" class="logo-icon" /> <!-- 添加logo图标 -->  
      </view>  
    </view>
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      images: [  
        { src: '/static/ride3.png', text: '公路骑者' },  
        { src: '/static/ride4.png', text: '激情狂飙' },  
        { src: '/static/ride5.png', text: '山地速降' },  
        { src: '/static/ride16.png', text: '丛林探险' },  
      ],  
      announcements: [  
        '欢迎参加我们的活动！',  
        '注意安全，确保佩戴头盔。',  
        '所有参与者请提前到场。',  
      ],  
      datalist: [  
        {  
          id: 1,  
          title: '用烟火气下酒',  
          location: 'Boskey House | 36.8km',  
          time: '05月09日 周四 18:00-20:00',  
          images: ['/static/ride6.png'],  
          status: '报名中',  
          type: '耐力骑行',  
          features: ['风景优美', '休息区多', '赠送饮品'],  
        },  
        {  
          id: 2,  
          title: '速爬凤凰岭-进阶活动',  
          location: '北安河[地铁站]-A西北口 | 19.0km',  
          time: '05月09日 周四 19:00-21:00',  
          images: ['/static/ride9.png'],  
          status: '报名结束',  
          type: '公路竞速',  
          features: ['领略中华文化', '赠送饮品'],  
        },  
        {  
          id: 3,  
          title: '特别活动',  
          location: '活动中心 | 30.0km',  
          time: '06月01日 周四 15:00-17:00',  
          images: ['/static/ride11.png'],  
          status: '活动结束',  
          type: '骑游活动',  
          features: ['高绿化率', '休息区多'],  
        },  
      ],  
    };  
  },  
  methods: {  
    getStatusColor(status) {  
      switch (status) {  
        case '报名中':  
          return 'green';  
        case '报名结束':  
          return 'orange';  
        case '活动结束':  
          return 'red';  
        default:  
          return 'transparent';  
      }  
    },
	 //点击实名认证跳转到certification页面
	 skipdetails(item) {
	 		var that = this;  
	 	//存值  
	 	uni.setStorage({  
	 		key: 'myKey',  
	 		data: item,  
	 		success: function () {  
	 			//console.log('存储成功');  
	 			// 存值成功后进行页面跳转  
	 			uni.navigateTo({  
	 				url: '/pages/index/details/Details',  
	 				success: function(){  
	 					console.log('跳转成功');  
	 				}  
	 			});  
	 		},  
	 		fail: function (err) {  
	 			console.log('存储失败：', err);  
	 		},  
	 	});  
	 }, 
  },  
};  
</script>  

<style>  
.container {  
  padding: 20rpx;  
  background-color: #f5f5f5;  
}  

.swiper {  
  height: 200px;  
  border-radius: 5px;  
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  
}  

.slide-image {  
  width: 100%;  
  height: 100%;  
}  

.text-overlay {  
  position: absolute;  
  bottom: 10px;  
  left: 10px;  
  color: white;  
  background-color: rgba(0, 0, 0, 0.5);  
  padding: 5px;  
  border-radius: 5px;  
}  

.announcement-container {  
  overflow: hidden;  
  white-space: nowrap;  
  box-sizing: border-box;  
  margin: 20rpx 0;  
  background-color: yellow;  
  padding: 10rpx;  
  display: flex;  
  align-items: center; /* 垂直居中对齐 */  
  border-radius: 5px;  
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  
}  

.announcement-icon-container {  
  position: relative;  
}  

.announcement-icon {  
  width: 30rpx;  
  height: 30rpx;  
  margin-right: 10rpx;
	
}  

.announcement-content {  
  animation: scroll 15s linear infinite; /* 动画效果 */  
}  

.announcement-text {  
  display: inline-block;  
  padding: 10rpx;
}  

.registration-status {  
  font-size: 20rpx;  
  margin-left: 10rpx;  
  font-weight: bold;  
  padding: 0 5px;  
  border-radius: 5px;  
  color: #ffffff;  
  height: 30rpx;  
  line-height: 30rpx;  
  text-align: center;  
}  

.icon {  
  width: 20rpx;  
  height: 20rpx;  
  margin-right: 5rpx;  
}  

.type {  
  font-size: 20rpx;  
  color: #666;  
  margin-top: 5rpx;  
}  

.features {  
  font-size: 20rpx;  
  color: #333;  
  margin-top: 5rpx;  
}  

.feature-item {  
  background-color: #e0e0e0;  
  border-radius: 5rpx;  
  padding: 5rpx 10rpx;  
  margin-right: 5rpx;  
}  

@keyframes scroll {  
  0% { transform: translateX(100%); }  
  100% { transform: translateX(-100%); }  
}  

.list {  
  display: flex;  
  flex-direction: column;  
  gap: 20rpx;  
}  

.item {  
  display: flex;  
  gap: 20rpx;  
  background-color: #ffffff;  
  padding: 20rpx;  
  border-radius: 10rpx;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
  align-items: center; /* 垂直居中对齐所有子元素 */  
  position: relative;  
}  

.activity-image-container {  
  flex-shrink: 0;  
}  

.activity-image {  
  width: 200rpx;  
  height: 200rpx;  
  border-radius: 5px;  
}  

.info {  
  display: flex;  
  flex-direction: column;  
  width: 500rpx;  
  background-color: #ffffff;  
}  

.title {  
  font-size: 30rpx;  
  font-weight: bold;  
  color: #333;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  

.location {  
  font-size: 25rpx;  
  color: #666;  
}  

.time {  
  font-size: 25rpx;  
  color: #666;  
}  

.logo-icon {  
  width: 60rpx;  
  height: 60rpx;  
  position: absolute;  
  right: 10px;  
  bottom: 10px;  
  opacity: 0.5;  
}  
</style>